import React, { useMemo, useState } from "react";
import { NavBar, Tag } from "antd-mobile";
import { useLocation, useNavigate, useSearchParams } from "react-router-dom";
import MyTick from "../../component/MyTick";
import MyNavTime from "../../component/MyNavTime";
import { Card, Button, List, Checkbox } from "antd-mobile";
import styles from "./index.module.css";
import { useDispatch, useSelector } from "react-redux";
import { TickStatus } from "../../store/TickSlice";
import { SubmitBar } from "react-vant";
function Index() {
  const [sj] = useSearchParams();
  const price = sj.get("price");
  const leavSeat = sj.get("leavSeat");
  console.log(leavSeat, price);
  const navigate = useNavigate();
  const { state } = useLocation();
  const handleToTick = () => {
    navigate("/tick");
  };

  const { TickListDatas } = useSelector((state) => state.TickSlice);
  const dispatch = useDispatch();

  const selectTicklist = useMemo(() => {
    return TickListDatas.filter((item) => item.state);
  }, [TickListDatas]);

  const [sitPos, setSitPos] = useState([]);
  const sitlist = useMemo(() => {
    switch (selectTicklist.length) {
      case 1:
        return [["A", "B", "C", "D", "E"]];
      case 2:
        return [
          ["A", "B", "C", "D", "E"],
          ["A", "B", "C", "D", "E"],
        ];
      case 3:
        return [
          ["A", "B", "C", "D", "E"],
          ["A", "B", "C", "D", "E"],
          ["A", "B", "C", "D", "E"],
        ];
      default:
        return [];
    }
  });

  const poslist = useMemo(() => {
    return sitPos.slice(-sitlist.length);
  }, [sitlist, sitPos]);

  const alllprice = selectTicklist.length * price;
  const handleClickSit = (row, ind) => {
    setSitPos([...sitPos, { row, ind }]);
  };

  const handleToPlay = () => {
    navigate(`/play?price=${alllprice}&seat=${leavSeat}`, { state: state });
  };
  return (
    <div className={styles.order}>
      <NavBar onBack={() => navigate(-1)}>车票购票页</NavBar>
      <div className={styles.ordertop}>
        <span>{leavSeat}</span>
        <span style={{ color: "red", fontSize: 16 }}>￥{price}</span>
      </div>

      {/* <MyNavTime state={state}></MyNavTime> */}
      <MyTick state={state}></MyTick>
      <div className={styles.Cardlist}>
        <Card>
          <Button size="small" color="primary" onClick={() => handleToTick()}>
            添加乘车人
          </Button>
          <List header="">
            {selectTicklist.map((item, ind) => (
              <List.Item
                key={ind}
                description={item.code}
                extra={
                  <Checkbox
                    onChange={() => {
                      dispatch(TickStatus(item));
                    }}
                  />
                }
              >
                {item.name}
              </List.Item>
            ))}
          </List>
        </Card>

        <div>
          {selectTicklist.length > 0 && (
            <Card title="选择坐席：">
              {sitlist.map((item, row) => (
                <div key={row} className={styles.orderitem}>
                  {item.map((it, ind) => (
                    <Tag
                      key={ind}
                      color={
                        poslist.some(
                          (item) => item.row === row && item.ind === ind
                        )
                          ? "primary"
                          : "default"
                      }
                      onClick={() => handleClickSit(row, ind)}
                    >
                      {it}
                    </Tag>
                  ))}
                </div>
              ))}
            </Card>
          )}
        </div>

        <SubmitBar
          price={alllprice * 100}
          buttonText="提交订单"
          onSubmit={() => handleToPlay()}
        />
      </div>
    </div>
  );
}

export default Index;
